<template>
  <div class="guanghuai_page">
    <div class="top">
      <van-icon name="arrow-left" @click="back" />
      <div>历史记录</div>
      <div @click="add">新增</div>
    </div>

    <!-- 搜索栏 -->
    <van-search
      v-model="value"
      show-action
      placeholder="客户名称/拜访标题"
      shape="round"
    >
      <template #action>
        <div style="color:'#003399'">搜索</div>
      </template>
    </van-search>
    <!-- 内容页面 -->
    <div class="content">
        <div class="box">
            <div class="img">
               <img :src="require('../assets/images/guanhuai/guanhuai.png')" alt="">
            </div>
            <div class="text">
                <p><span>拜访标题</span> 重要商务会议拜访</p>
                 <p><span>客户名称</span> 林丹</p>
                  <p><span>拜访事件</span> 2018-10-25 14:30</p>
            </div>
            <div class="tips" @click="huifangDetail">定期回访</div>

           
        </div>



        <div class="box">
            <div class="img">
               <img :src="require('../assets/images/guanhuai/guanhuai.png')" alt="">
            </div>
            <div class="text">
                <p><span>拜访标题</span> 重要商务会议拜访</p>
                 <p><span>客户名称</span> 林丹</p>
                  <p><span>拜访事件</span> 2018-10-25 14:30</p>
            </div>
            <div class="tips">定期回访</div>

           
        </div>
    </div>

    <div class="more">
        <p>展开更多</p>
        <van-icon name="arrow-down" />

    </div>
  </div>
</template>

<script>
import {ZoufangListApi} from '../request/api'
export default {
  data() {
    return {
        value:'',
    };
  },
  created(){
      ZoufangListApi({
          keyword:1,
          current:2,
          size:4
      }).then(res=>{
          console.log(res);
      })

      
  },
  methods: {
    back() {
      this.$router.back();
    },
    huifangDetail(){
        this.$router.push('/huifang')
    },
    add(){
        this.$router.push('/newadd')
    }
  },
};
</script>

<style lang="less" scoped>
.guanghuai_page{
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}
.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  color: #fff;
  padding: 0 12px;
  box-sizing: border-box;
  background-color: #039;
  .van-icon {
    font-size: 24px;
  }
}

/deep/.van-search__action{
    color: #039;
    font-size: 18px;
}

.content{
    margin-top: 10px;
    .box{
        width: 100%;
        height: 80px;
        background-color: #fff;
        display: flex;
        align-items: center;
        padding: 12px 13px;
        box-sizing: border-box;
        border-bottom: 1px solid #e5e5e5;
        .img{
            width: 58px;
            height: 58px;
            // border: 1px solid #000;
            margin-right: 12px;
            img{
                width: 58px;
                height: 58px;
            }
        }
        .text{
            p{
               span{
                    color: #999;
               }
                &:nth-of-type(2){
                    margin: 6px 0;
                }
            }

        }
        .tips{
           width: 48px; 
           height: 12px;
           background-color: #fff7e7;
           font-size: 12px;
           margin-left: 30px;
           margin-top: -46px;
           border: 1px solid #f7af52;
           color: #f7af52;
        }
    }
}

.more{
    width: 100%;
    height: 40px;
    background-color: #fff;
    line-height: 40px;
    text-align: center;
    color: #0b3ea4;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>